<template>
	<view class="container">
		<input class="input" placeholder="请输入用户名" v-model="userName"></input>
		<input password class="input" placeholder="请输入密码" v-model="pw1"></input>
		<input password class="input" placeholder="请再次输入密码" v-model="pw2"></input>
		<button @click="onRegisterButtonClicked()" class="button">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: "",
				pw1: "",
				pw2: "",
			}
		},
		methods: {
			onRegisterButtonClicked() {
				console.log(this.userName);
				console.log(this.pw1)
				console.log(this.pw2)

				if (!this.userName) {
					return this.showError("用户名不可为空")
				}
				if (!/^[a-zA-Z0-9_]{3,12}$/.test(this.userName)) {
					return this.showError("用户名需3-12位（字母/数字/下划线）")
				}
				if (!this.pw1 || !this.pw2) {
					return this.showError("密码不可为空")
				}
				if (!/^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/.test(this.pw1)) {
					return this.showError("密码需6-16位（含字母和数字）")
				}
				if (this.pw1 !== this.pw2) {
					return this.showError("两次密码不一致")
				}

				// 注册成功
				uni.showToast({
					title: "注册成功",
					icon: "success"
				})

				// 跳转到登录页（
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}, 1500)
			},
			showError(msg) {
				uni.showToast({
					title: msg,
					icon: "none"
				})
				this.userName = ""
				this.pw1 = ""
				this.pw2 = ""
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px 20px;
		height: 50vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.input {
		width: 100%;
		border-style: solid;
		border-color: grey;
		border-radius: 20px;
		border-width: 1px;
		padding: 5px 10px;
		font-size: 35rpx;
		margin-bottom: 10px;
	}

	.button {
		width: 100%;
		background-color: #08f;
		font-size: 35rpx;
		color: white;
		font-weight: bold;
		border-radius: 20px;
		margin-bottom: 10px;
	}
</style>